<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>库内管理</el-breadcrumb-item>
      <el-breadcrumb-item>上架管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-container>
      <el-main>
        <!-- 查询表单 -->
        <el-form
          :inline="true"
          ref="searchForm"
          :model="searchForm"
          class="demo-form-inline"
        >
          <el-form-item prop="commoditybar">
            <el-input
              v-model="searchForm.commoditybar"
              placeholder="商品编码"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item prop="commodityname">
            <el-input
              v-model="searchForm.commodityname"
              placeholder="商品名称"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item prop="locatorcode">
            <el-input
              v-model="searchForm.locatorcode"
              placeholder="货位编码"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item prop="locatorname">
            <el-input
              v-model="searchForm.locatorname"
              placeholder="货位名称"
              style="width: 180px"
            ></el-input>
          </el-form-item>
          <el-form-item prop="state">
            <el-select
              v-model="searchForm.state"
              placeholder="审核状态"
              style="width: 180px"
            >
              <el-option label="已审核" value="2"></el-option>
              <el-option label="待审核" value="1"></el-option>
            </el-select> </el-form-item
          ><br />
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSearch"
              >搜索</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-refresh"
              @click="resetForm"
              >重置</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-check" @click="onCheck"
              >审核</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-close" @click="cancelCheck"
              >撤销审核</el-button
            >
          </el-form-item>
        </el-form>
        <!--上架信息表-->
        <el-table
          ref="putOnTable"
          :data="putOnData"
          tooltip-effect="dark"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            prop="commoditybar"
            label="商品编码"
            sortable
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="commodityname"
            label="商品名称"
            sortable
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="locatorcode"
            label="货位编码"
            sortable
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="locatorname"
            label="货位名称"
            sortable
            width="120"
          >
          </el-table-column>
          <el-table-column prop="oldlocatorcode" label="原货位编码" width="120">
          </el-table-column>
          <el-table-column prop="oldlocatorname" label="原货位名称" width="120">
          </el-table-column>
          <el-table-column prop="qty" label="数量" sortable width="120">
          </el-table-column>
          <el-table-column prop="state" label="状态" width="120">
          </el-table-column>
          <el-table-column prop="creator" label="创建人" sortable width="120">
          </el-table-column>
          <el-table-column
            prop="createtime"
            label="创建时间"
            width="120"
            sortable
          >
          </el-table-column>
          <el-table-column prop="auditor" sortable label="审核人" width="120">
          </el-table-column>
          <el-table-column
            prop="updatetime"
            label="审核时间"
            width="120"
            sortable
          >
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {
        commoditybar: "",
        commodityname: "",
        locatorcode: "",
        locatorname: "",
        state: "",
      },
      putOnData: [],
      multipleSelection: [],

      currentPage: 1,
      pagesize: 10,
      total: 0,
    };
  },
  methods: {
    onSearch() {
      console.log("submit!");
    }, //查询方法

    resetForm() {
      this.$refs.searchForm.resetFields();
    }, // 重置，重置表单时，表单必须包含ref,:model, 
      // el-form-item必须有prop,prop的名称与v-model后的保持一致

    onCheck() {}, //审核

    cancelCheck() {}, //撤销审核

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    //当每页显示的条数改变时执行该方法
    handleSizeChange: function (size) {
      this.pageSize = size;
      this.currentPage = 1;
      this.onSearch();
    },
    //当前页码变化时执行该方法
    handleCurrentChange: function (page) {
      this.currentPage = page;
      this.onSearch();
    },
  },
};
</script>

<style scoped>
</style>